﻿
@{
    ViewBag.Title = "LotteryPeriodWinnerList";
    Layout = "~/Views/Shared/_LayoutBlank.cshtml";
}


<script>

    var _campaignId = getQueryString("campaignId");
    var _id = getQueryString("id"); //PeriodId

    //当前页
    var _currentPage = 1;

    $(document).ready(function ()
    {
        if (_online == false)
            return;

        loadData();
    });

    function loadData(targetPage)
    {
        var loadLayerIndex = layer.load(0, {
            shade: [0.2, '#fff']
        });

        var args = new Object();
        args.Page = targetPage || 1;
        args.PeriodId = _id;
        args.Winner = true;

        $.ajax({
            url: "/Api/Campaign/GetLotteryPeriodSignLogList",
            type: "POST",
            dataType: "json",
            data: JSON.stringify(args),
            success: function (data, status, jqXHR)
            {
                // alert(data);

                layer.close(loadLayerIndex);
                if (data.Success)
                {
                    var resultObj = data.Data;

                    _currentPage = resultObj.Page;

                    //alert(JSON.stringify(resultObj));
                    var gettpl = document.getElementById('tableTemplate').innerHTML;
                    laytpl(gettpl).render(resultObj.ItemList, function (html)
                    {
                        document.getElementById('divTableBodyContainer').innerHTML = html;
                        fitTable();
                    });

                    laypage({
                        skin: 'yahei',
                        cont: document.getElementById('divPagingContainer'),
                        pages: resultObj.TotalPage, //总页数
                        curr: resultObj.Page, //当前页
                        groups: 7, //连续显示分页数
                        jump: function (obj, first)
                        {
                            if (!first)
                            { //点击跳页触发函数自身，并传递当前页：obj.curr
                                loadData(obj.curr);
                            }
                        }
                    });

                } else
                {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest)
            {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }


    function scrollHeader()
    {
        // alert(divTableBodyContainer.scrollLeft);
        var ml = 0 - divTableBodyContainer.scrollLeft;
        document.getElementById("tableHeader").style.cssText = "margin-left:" + ml + "px;";
    }

    function fitTable()
    {
        $("#tableBody").width($("#tableHeader").width());

        $("#tableHeader tr:first").each(function (n, value)
        {
            $(this).find("td").each(function (n, value)
            {
                $("#tableBody tr:first td:eq(" + n + ")").width(value.width)
            });
        });
    }

    function changePage(url)
    {
        window.location.href = url + "?campaignId=" + _campaignId + "&id=" + _id;
    }

    function cancel()
    {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    }

    //0、46、64、96、132数值可选，0代表640*640正方形头像
    function fitHeadImage(url, size)
    {

        if (url == undefined || url == null || url == "")
            return "";

        url = url.substr(0, url.length - 1);
        url = url + size;
        return url;
    }

</script>


<script id="tableTemplate" type="text/html">

    <table id="tableBody" border="0" cellspacing="0" cellpadding="0">

        {{# for(var i = 0, len = d.length; i < len; i++){ }}
        {{# var headimg = fitHeadImage(d[i].Headimgurl,46) }}
        <tr>
            <td height="50"><img src="{{headimg}}" /></td>
            <td>{{ d[i].NickName }}</td>
            <td>
                {{# if(d[i].Sex == 1){ }}
                男
                {{# }else if(d[i].Sex == 2){ }}
                女
                {{# }else if(d[i].Sex == 0){ }}
                未知
                {{# } }}
            </td>
            <td>
                {{# if(d[i].MobilePhone != null){ }}
                {{d[i].MobilePhone}}
                {{# } }}
            </td>
            <td>{{ d[i].SignTime }}</td>
        </tr>
        {{# } }}

    </table>

</script>

<div style="margin-left:20px; margin-right:20px; margin-top:20px;">
    <span id="spanTitle" class="font_black_24">周期</span>
</div>

<div style="margin-top: 10px;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td class="td_ContentTab" style="width: 150px;">
                <a href="javascript:void(0)" class="a_black_16" onclick="changePage('/Campaign/LotteryPeriodEdit')">基本信息</a>
            </td>
            <td class="td_ContentTab" style="width: 150px;">
                <a href="javascript:void(0)" class="a_black_16" onclick="changePage('/Campaign/LotteryPeriodSignLogList')">报名者列表</a>
            </td>
            <td class="td_ContentTab_active" style="width: 150px;">
                中奖者列表
            </td>
            <td align="right">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td colspan="4" bgcolor="#EEEEEE" height="2"></td>
        </tr>
    </table>
</div>

<div style=" position:absolute; overflow:auto ;margin-top:70px;left:30px; right:30px; bottom:60px; top:50px; ">

    <div style=" margin-top:0px">
        <div style="overflow:hidden; padding-left:20px;" class="tableHeader">

            <table id="tableHeader" border="0" cellspacing="0" cellpadding="0" width="725" height="47">
                <tr>
                    <td width="65"></td>
                    <td width="220">微信昵称</td>
                    <td width="80">性别</td>
                    <td width="170">手机号码</td>
                    <td width="200">报名时间</td>
                </tr>
            </table>

        </div>

        <div style=" margin-top:10px">
            <!--div必须要设置height，否则滚动条出不来-->
            <div id="divTableBodyContainer" style="overflow:auto; height:100%;padding-left:20px;" onscroll="scrollHeader()">
                @*<div style="background-color:aqua" id="demo1"></div>*@
                <!--table必须要有一个确切的宽度，否则无法超出div-->
                @*<table id="tableBody" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td><img src="Images/0.jpg" style="width:46px;" /></td>
                            <td height="35"><a href="#">我就是天边云</a></td>
                            <td>男</td>
                            <td>13900008765</td>
                            <td>2015-12-3 12:32:12</td>
                        </tr>
                    </table>*@
            </div>

        </div>

    </div>

    <div style="height:1px; margin-top:5px; background-color:#cccccc">

    </div>

    <div id="divPagingContainer" style=" margin-top:20px; margin-bottom:20px;text-align:right; ">

    </div>
</div>



<div style=" background-color:#ccc; position:absolute; bottom:55px; left:20px;right:20px; height:1px;">

</div>

<div style="position:absolute; bottom:15px; left:20px;right:20px;">
    <div style="float:right">
        <input name="btnCancel" type="button" class="btn_blue" id="btnCancel" value="取 消" onclick="cancel()" />
    </div>
    <div style="clear:both">
    </div>
</div>